<template>
  <div class="page-container">
    <el-table :data="productData" style="width: 100%">
      <el-table-column type="selection" width="55" />
      <template v-for="item in headerData">
        <el-table-column
          v-if="item.type == 'img'"
          :label="item.label"
          :prop="item.key"
          :key="item.key"
          :width="item.width"
        >
          <template #default="scope">
            <el-image style="width: 50px" :src="scope.row[item.key]" />
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="item.type == 'status'"
          :label="item.label"
          :prop="item.key"
          :width="item.width"
        >
          <template #default="scope">
            <el-switch
              v-model="scope.row[item.key]"
              class="ml-2"
              :width="50"
              inline-prompt
              :active-text="item.activeContent"
              :inactive-text="item.inactiveContent"
            />
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="item.type == 'tableStatus'"
          :label="item.label"
          :prop="item.key"
          :width="item.width"
        >
          <template #default="scope">
            <div>
              {{
                scope.row[item.key] == "1"
                  ? "未毕业"
                  : scope.row[item.key] == "2"
                  ? "返校重听"
                  : scope.row[item.key] == "3"
                  ? "已就业"
                  : scope.row[item.key] == "4"
                  ? "返回未就业"
                  : "未就业"
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="item.type == 'createdTimes'"
          :label="item.label"
          :prop="item.key"
          :width="item.width"
        >
          <template #default="scope">
            <div>
              {{ new Date(scope.row[item.key]).toLocaleDateString() }}
            </div>
          </template>
        </el-table-column>
        <slot v-else-if="item.slot" :name="item.slot"></slot>
        <el-table-column
          v-else
          :width="item.width"
          :label="item.label"
          :prop="item.key"
          :fixed="item.type == 'fixed'"
        >
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>
<script setup>
/**
 * 模块引入
 */
import { reactive, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const props = defineProps({
  productData: {
    type: Array,
  },
  headerData: {
    type: Array,
  },
});
// console.log(productData, "children");
/**
 * 数据
 */
const state = reactive({});
/**
 * 功能方法
 */
</script>
<style lang="less" scoped>
// .el-table {
//   ::v-deep tr {
//     font-size: 12px;
//   }
// }
</style>
